<template>
  <RkContainer :isFooter="false"
    :isHeader="false"
    :isAside="isAside"
    style="padding-top: 8px;">
    <template #header_left></template>
    <template #header_right></template>
    <template #aside></template>
    <template #main>
      <rk-center>
        <template #condition>
          <rk-center-bar>
            <template #content>
              <el-form ref="form"
                class="log-form-wrapper"
                :inline="true">
                <div class="form-item-panel">
                  <el-form-item label="模糊查询">
                    <el-input v-model="queryParams.keyword"
                      placeholder="用户编码/名称/操作IP"></el-input>
                  </el-form-item>
                  <el-form-item label="区　　划">
                    <RKAdTreeSelect v-model="queryParams.adCode"
                      placeholder="请选择区划"
                      style="width: 100%;">
                    </RKAdTreeSelect>
                  </el-form-item>
                  <el-form-item label="编码/名称">
                    <el-input v-model="queryParams.menuKeyword"
                      placeholder="菜单编码/名称"></el-input>
                  </el-form-item>
                </div>
                <div class="form-item-panel">
                  <el-form-item label="开始时间">
                    <el-date-picker v-model="queryParams.startDate"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder="请输入开始时间" />
                  </el-form-item>
                  <el-form-item label="结束时间">
                    <el-date-picker v-model="queryParams.endDate"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder="请输入结束时间" />
                  </el-form-item>
                </div>
              </el-form>
            </template>
            <template #buttons>
              <el-button type="primary"
                @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
              <!-- <el-button type="primary">导出</el-button>
              <el-button type="primary">打印</el-button> -->
            </template>
          </rk-center-bar>
        </template>
        <template #content>
          <rk-grid ref="logsTableRef"
            :title="route.meta.title"
            :dataUrl="'/log/pageList'"
            :columns="tableColumns"
            :params="queryParams">
            <template #toolbar_title_buttons>
            </template>
          </rk-grid>
        </template>
      </rk-center>
    </template>
  </RkContainer>
</template>
<script setup>

import RKAdTreeSelect from "@/components/tree-select/src/AdTreeSelect.vue"
import { reactive, ref } from "vue"
import { useRoute } from 'vue-router'
// 获取当前路由
const route = useRoute()

// ----- 树结构操作
const isAside = ref(false)
const logsTableRef = ref('')
// ----- 表格相关操作
const queryParams = reactive({
  adCode: undefined,
  endDate: undefined,
  keyword: undefined,
  startDate: undefined,
  menuKeyword: undefined,
})
const tableColumns = ref([
  { field: 'userCode', title: '用户编码', width: 180, align: 'left' },
  { field: 'userName', title: '用户名称', width: 250, align: 'left' },
  { field: 'adName', title: '区划', width: 250, align: 'left' },
  { field: 'lopDate', title: '操作日期', width: 180, align: 'center' },
  { field: 'actionName', title: '操作类型', width: 150, align: 'left' },
  // { field: 'remark', title: '操作说明', width: 150, align: 'left' },
  { field: 'menuCode', title: '菜单编码', width: 150, align: 'left' },
  { field: 'menuName', title: '菜单名称', width: 150, align: 'left' },
  // { field: 'menuUrl', title: '菜单URL', width: 150, align: 'left' },
  { field: 'userIp', title: '操作用户IP', width: 150, align: 'left' },
  // { field: 'logType', title: '日志类型', width: 100, align: 'center' },
  // { field: 'logLevel', title: '日志级别', width: 100, align: 'center' },
])
/**查询 */
const handleSearch = () => {
  logsTableRef.value.searchEvent()
}
/**重置 */
const handleReset = () => {
  const params = logsTableRef.value.resetEvent()
  Object.assign(queryParams, params)
}
</script>

<style lang="scss" scoped>
.log-form-wrapper {
	width: 100%;
	:deep(.el-form-item) {
		width: calc((100% / 3) - 15px);
		margin-right: 15px !important;
	}

	.form-item-panel {
		display: flex;
		width: 100%;
		margin-bottom: 15px;
		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>